<template>
    <div class="news">
        <!-- 大标题 -->
        <h1 class="header">{{newsinfo.title}}</h1>
        <!-- 子标题 -->
        <p class="info-ellipsis">
            <span>发表时间：{{newsinfo.time}}</span>
            <span>点击:{{newsinfo.clickTimes}}次</span>
        </p>
        <hr>
        <!-- 内容区域 -->
        <div v-html="newsinfo.content"></div>
        <!-- 评论区 -->
        <comment-box></comment-box>
    </div>
</template>

<script>
// 导入评论子组件
import comment from '../subcomponents/comment.vue'


export default {
    data(){
        return {
            id : this.$route.params.id,
            newsinfo:{
                title:'标题',
                time:'2019-05-21',
                clickTimes:2,
                content:'<h1>今天Vue又进步了</h1><h2>哈哈哈哈</h2><h3>beforeCreated</h3><img src="../imgs/1.png"></img>'
            }
        };
    },
    components:{// 用来注册子组件
        'comment-box':comment
    }
}
</script>

<style lang="scss">
.news{
    padding: 0 4px;
    .header{
        font-size: 16px;
        color: red;
        text-align: center;
        margin: 15px 0px;
    }
    .info-ellipsis{
        font-size: 12px;
        color: royalblue;
        display: flex;
        justify-content: space-between;
    }
    img{
        width: 100%
    }
}
</style>
